<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<title>51微贷</title>
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../css/reset.css">
		<link rel="stylesheet" type="text/css" href="../css/info.css">
	</head>
	<script>
		function a(){
			var b = document.documentElement.clientWidth;
			b = b > 640 ? 640 : b;
			var c = b / 640 * 100;
			document.getElementsByTagName("html")[0].style.fontSize = c + "px";
		}
		a();
		window.onresize = a;
	</script>
	<body class="bg">
		<div class="m-guide">
			<div id="slider" class="mui-slider mui-fullscreen">
				<div class="mui-slider-group">
					<div class="mui-slider-item">
						<div class="item item1 guide-show f-pr">
							<a class="skip f-pa">跳过</a>
							<p class="tit-1 animated bounceInDown f-pa"><img src="../images/guide/guide-1.png"></p>
							<p class="tit-2 animated bounceInLeft f-pa"><img src="../images/guide/guide-2.png"></p>
							<p class="img f-pa"><img src="../images/guide/guide-3.png"></p>
						</div>
					</div>
					<div class="mui-slider-item">
						<div id="tips-2" class="item item2 mui-hidden f-pr">
							<a class="skip f-pa">跳过</a>
							<p class="tit-1 animated bounceInDown f-pa"><img src="../images/guide/guide-4.png"></p>
							<p class="tit-2 animated bounceInLeft f-pa"><img src="../images/guide/guide-5.png"></p>
							<p class="img f-pa"><img src="../images/guide/guide-6.png"></p>
						</div>
					</div>
					<div class="mui-slider-item">
						<div id="tips-3" class="item item3 mui-hidden f-pr">
							<a class="skip f-pa">跳过</a>
							<p class="tit-1 animated bounceInDown f-pa"><img src="../images/guide/guide-7.png"></p>
							<p class="tit-2 animated bounceInLeft f-pa"><img src="../images/guide/guide-8.png"></p>
							<p class="img f-pa"><img src="../images/guide/guide-9.png"></p>
							<div class="btn-box f-pa">
								<!--<a class="btn f-fl" id="login">注册/登录</a>-->
								<a class="btn" id="close">立即体验</a>
							</div>
						</div>
					</div>
				</div>
				<div class="mui-slider-indicator">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
				</div>
			</div>
		</div>

		<script src="../js/zepto.min.js"></script>
		<script src="../js/mui.min.js"></script>
		<script>
			mui.back = function() {};
			mui.plusReady(function() {
				plus.navigator.setFullscreen(true);
				plus.runtime.getProperty(plus.runtime.appid, function(wgtinfo) {
					var key = wgtinfo.version.replace('.', '') + 'lauchFlag';
					plus.storage.setItem(key, "true");
				});
				
				// 跳过事件		
				$('.skip').on('tap', function(){
					plus.navigator.setFullscreen(false);
					plus.webview.currentWebview().close('pop-out',300);
				});
			});

			//立即体验按钮点击事件
			document.getElementById("close").addEventListener('tap', function(event) {
				plus.navigator.setFullscreen(false);
				plus.webview.currentWebview().close('pop-out',300);
			}, false);
			
			//图片切换时，触发动画
			document.querySelector('.mui-slider').addEventListener('slide', function(event) {
			 	//注意slideNumber是从0开始的；
			 	var index = event.detail.slideNumber+1;
			 	if(index==2||index==3){
			 		var item = document.getElementById("tips-"+index);
			 		if(item.classList.contains("mui-hidden")){
			 			item.classList.remove("mui-hidden");
			 			item.classList.add("guide-show");
			 		}
			 	}
			 	
			 	if(index == 3){
			 		$('.mui-slider-indicator').hide();
			 	}else{
			 		$('.mui-slider-indicator').show();
			 	}
			});
			
		</script>
	</body>
</html>